<template>
  <div class="all" @mouseleave="currentIndex='ok'">
    <div class="navbox">
      <div @mouseover="currentIndex=index" 
      :class="['item',{active:currentIndex===index}]" v-for="(item,index) in nav" :key="index">{{item.type}} <i class="el-icon-arrow-right"></i></div>
    </div>
    <div v-if="currentIndex!='ok'"  class="content">
      <div v-if="currentIndex==index" class="item" v-for="(item,index) in nav" :key="index" >
        <div @click="$router.push('/post?city='+el.city)" class="city" v-for="(el,i) in item.children">
          <div class="num">{{i+1}}</div>
          <span>{{el.city}}</span>
          <p>{{el.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      nav:[],
      currentIndex:'ok'
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData(){
      const {data:res} = await this.$axios.get('/posts/cities')
      console.log(res)
      this.nav = res.data
    }
  },
}
</script>
<style lang="less" scoped>
.all{
  width: 100%;
  position: relative;
}
.navbox{
  width: 100%;
  position: absolute;
  left:0;
  top:0;
  z-index: 999;
  .item{
    height:40px;
    display: flex;
    align-items: center;
    padding:0 20px;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
    i{
      color:#9e9e9e;
    }
    &.active{
      border-right:1px solid #fff;
    }
    &:hover{
      color:orange;
    }
    &:last-child{
      border-bottom:none;
      height:39px;
    }
  }
}
.content{
    background: #fff;
    position: absolute;
    right:-349px;
    top:-1px;
    width: 350px;
    height:200px;
    border:1px solid #ddd;
    padding:10px 15px;
    z-index: 888;
    .item{
      height:100%;
      display: flex;
      flex-direction: column;
      .city{
        display: flex;
        flex:1;
        align-items: center;
        font-size: 14px;
        cursor: pointer;
        .num{
          font-size: 22px;
          color:#ffa500;
          text-align: center;
        }
        span{
          margin: 0 15px;
          color:#ffa500;
          &:hover{
            text-decoration: underline;
          }
        }
        p{
          color:#999;
          &:hover{
            text-decoration: underline;
          }
        }
      }
    }
  }
</style>